<template>
  <div class="content-outer">
    <Block class="content-table">
      <div class="table-table" style="margin-top:40px;">

        <!-- <el-table
          :data="tableData"
          style="width: 100%"
          :loading="loading"
          :span-method="arraySpanMethod"
        >
          <el-table-column
            prop="name"
            label="公众号名称"
          >
          </el-table-column>

          <el-table-column
            prop="name"
            label="公众号名称"
          >

          </el-table-column>
          <el-table-column
            prop="zip"
            label="操作"
          >
            <el-button type="text" size="medium" @click="edit(row)">编辑</el-button>
          </el-table-column>
        </el-table> -->

        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          :auto-scroll="false"
          @pagination="handlePageChange"
        >
          <template v-slot:merchant="{ row }">
            <p v-for="(item,index) in row.merchant" :key="index" style="margin-right:10px">{{ item.body }}</p>
          </template>
          <template v-slot:zip="{ row }">
            <el-button type="text" size="medium" @click="edit(row)">编辑</el-button>
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer v-if="drawer.visible" v-model="drawer.visible" :drawer-title="drawer.title" :row-info="drawer.row" :component="relevancy" drawer-size="540" @ok="onSubmit"></BiDrawer>
  </div>
</template>

<script>
import BiDrawer from '@/components/BiDrawer'
import { officialList } from '@/api/merchant'
import relevancy from './component/relevancy.vue'
export default {
  name: 'ServicePay',
  components: {
    BiDrawer
  },
  data() {
    return {
      relevancy,
      drawer: {
        visible: false,
        title: '公众号编辑',
        row: {}
      },
      page_info: {
        page: 1,
        page_size: 20,
        total: 1
      },
      loading: false,
      tableData: [],
      tableColums: [
        {
          label: '公众号名称',
          prop: 'name'
        },
        {
          label: '关联商户号',
          prop: 'merchant',
          slotScope: true
        },
        {
          label: '正在使用的小程序/客服消息支付',
          prop: 'mini_app_name'
        },
        {
          label: '操作',
          prop: 'zip',
          width: 160,
          fixed: 'right',
          align: 'left',
          slotScope: true
        }

      ]
    }
  },

  mounted() {
    this.$AccessReport.report('zhangyu-merchant', [this.$store.state.user.routerItem.name, '支付管理', '客服消息支付'])
    this.officialList()
  },
  methods: {
    // 更新代码
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      return [1, 2]
    },
    edit(row) {
      this.drawer.visible = true
      this.drawer.row = row
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.officialList()
    },
    officialList() {
      officialList().then(res => {
        this.tableData = res.data
      })
    },
    onSubmit(data) {
      this.officialList()
    }
  }
}
</script>
<style lang="scss" scoped>
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
  .private_key{
    width: 120px;
    height: auto;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
}
.popoverText{
    width: 280px;
    height: 300px;
    overflow: auto;
  }
  .icon{
    font-size: 16px;
    color: #06C261;
    margin-left: 10px;
    cursor: pointer;
  }
</style>
